<template>
	<view class="c-content">
		<view class="add-recode">
			<u-toast ref="uToast"></u-toast>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">受理单位:</text>
				<u-input placeholder="请输入" border="bottom" v-model="acceptInfo.unit" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">受理类型:</text>
				<u-input placeholder="请输入" border="bottom" v-model="acceptInfo.acceptType" maxlength="20">
				</u-input>
			</view>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex" style="padding-bottom: 0;">审理结果:</text>
				<u-input placeholder="请选择" border="bottom" v-model="acceptInfo.result" maxlength="20">
				</u-input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">受理案号:</text>
				<u-input placeholder="请输入" border="bottom" v-model="acceptInfo.caseNum" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">申请时间:</text>
				<u--form labelPosition="left" :model="model">
					<u-form-item borderBottom @click="showAction = true; hideKeyboard()">
						<u-input :customStyle="dateStyle" v-model="acceptInfo.applyTime" disabled
							disabledColor="#ffffff" placeholder="请选择申请时间" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<u-datetime-picker :show="showAction" confirmColor="#1C5AD2" :value="actionVal"
					@close="showAction = false" @cancel="showAction = false" @confirm="confirmAction" mode="date">
				</u-datetime-picker>
			</view>
			<u-gap height="12" bgColor="#f7f6fa"></u-gap>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex">备注:</text>
				<u--textarea v-model="acceptInfo.summary" placeholder="请输入内容" count>
				</u--textarea>
			</view>
		</view>
		<u-gap height="12" bgColor="#fff"></u-gap>
		<view class="add-btn">
			<u-button @click="saveInfo()" shape="circle" color="#1C5AD2">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acceptInfo: {
					unit: "",
					acceptType: "",
					result: "",
					caseNum: "",
					applyTime: "",
					summary: ""
				},
				// 结案时间
				showAction: false,
				actionVal: Number(new Date()),
				dateStyle: {
					paddingLeft: '9px'
				},
			}
		},
		onLoad: function(option) {
			const that = this;
		},
		methods: {
			// 结案时间确认
			confirmAction(e) {
				const that = this;
				that.acceptInfo.applyTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showAction = false;
			},
			// 隐藏软键盘
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.c-content {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 60rpx;
	}

	.add-recode {
		width: 100%;

		.add-type {
			padding: 0rpx 24rpx 8rpx 24rpx;

			.type-title {
				padding-top: 24rpx;
			}
		}
	}

	/* 案件创建下一步按钮 */
	.add-btn {
		width: 100%;
		padding: 24rpx 12%;
		padding-bottom: 30rpx;
	}

	.add-btn /deep/ .u-button {
		font-size: 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
		margin-top: 0rpx;
	}
</style>